import React, { useEffect, useState } from "react";
import { PageHeader, Descriptions } from "antd";
import axios from "axios";
import dayjs from "dayjs";

export default function NewsPreview(props) {
  const [content, setContent] = useState(null);

  useEffect(() => {
    const fetchDate = async () => {
      const { data } = await axios.get(
        `/news/${props.match.params.id}?_expand=category&_expand=role`
      );
      setContent(data);
    };
    fetchDate();
  }, [props.match.params.id]);

  const auditMap = {
    0: "未审核",
    1: "审核中",
    2: "已通过",
    3: "未通过",
  };

  const publishMap = {
    0: "未发布",
    1: "待发布",
    2: "已上线",
    3: "已下线",
  };

  const colorState = {
    0: "black",
    1: "orange",
    2: "green",
    4: "red",
  };

  return (
    <>
      {content && (
        <>
          <PageHeader
            onBack={() => window.history.back()}
            title={content.title}
            subTitle={content.category.title}
          >
            <Descriptions size="small" column={3}>
              <Descriptions.Item label="创建者">
                {content.author}
              </Descriptions.Item>
              <Descriptions.Item label="创建时间">
                {dayjs(content.createTime).format("YYYY-MM-DD HH:mm:ss")}
              </Descriptions.Item>
              <Descriptions.Item label="发布时间">
                {content.publishTime
                  ? dayjs(content.publishTime).format("YYYY-MM-DD HH:mm:ss")
                  : "--"}
              </Descriptions.Item>
              <Descriptions.Item label="区域">
                {content.region}
              </Descriptions.Item>
              <Descriptions.Item label="审核状态">
                <span style={{ color: colorState[content.auditState] }}>
                  {auditMap[content.auditState]}
                </span>
              </Descriptions.Item>
              <Descriptions.Item label="发布状态">
                <span style={{ color: colorState[content.publishState] }}>
                  {publishMap[content.publishState]}
                </span>
              </Descriptions.Item>
              <Descriptions.Item label="访问数量">
                {content.view}
              </Descriptions.Item>
              <Descriptions.Item label="点赞数量">
                {content.star}
              </Descriptions.Item>
              <Descriptions.Item label="评论数量">0</Descriptions.Item>
            </Descriptions>
          </PageHeader>
          <div
            style={{
              margin: "0 24px",
              paddingTop: "10px",
              borderTop: "1px solid #ccc",
            }}
            dangerouslySetInnerHTML={{ __html: content.content }}
          ></div>
        </>
      )}
    </>
  );
}
